<script setup lang="ts">
import { RouterLink,RouterView } from 'vue-router';
import { useUserstore } from './stores/user';
import { loginFn } from './api/user';

const user=useUserstore()
</script>

<template id="app">
  <!-- 最外层 -->
<div class="container">
  
  <!-- 内容部分 -->
   
  <router-view v-slot="{Component}">
    <transition name="fade">
    <!-- 使用setup的单文件组件会自动根据文件名生成对应的文件name选项 -->
    <keep-alive include="HomeView">
      <Component :is="Component"/>
    </keep-alive>
    </transition>
  </router-view>
  
  <!-- 页脚部分 -->
  <!-- 进入登录或者其他二级页面时，要隐藏页脚部分 -->
  <footer v-show="$route.meta.show" class="footer">
    <router-link to="/home">
      <span class="iconfont icon-shouye"></span>
      <p>首页</p>
    </router-link> 
    <router-link to="/kind">
      <span class="iconfont icon-fenlei"></span>
      <p>分类</p>
    </router-link> 
    <router-link to="/cart">
      <span class="iconfont icon-gouwuche"></span>
      <p>购物车</p>
    </router-link> 

    <!-- 如果用户没有登录显示未登录 -->
    <router-link :to="user.loginState?'/user':'/login'">
      <span class="iconfont icon-My"></span>
      <p>{{user.loginState? '我的':'未登录'}}</p>
    </router-link> 
  </footer>

  <div class="tip">请将屏幕竖向使用</div>

</div>

</template>

<style lang="scss">
html,body,#app,.container{
  height: 100%;
}
html{
/*目前百分之九十以上UI设计师会使用iphone6，7，8的尺寸进行设计
如果设计图是iphone6，7，8为基础的设计图，我们应该100/375*100=26.666666666
如果设计图为iphone12pro为基础的设计图，我们应该100/390*100=25。641  
   */
  font-size:26.6666666666vw;

}
body{
  //具体的值根据设计图决定，为设计图中出现次数最多的字号
  font-size: 12px;


  .container{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .box{
      width:100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: auto;

      .header{
        width:100%;
        height: 0.44rem;
        background-color: red;
        text-align: center;
        line-height: 0.44rem;
        color: #fff;
      }
      .content{
        flex: 1;
        width: 100%;
        background-color: #fff;
        overflow: auto;
        // 添加css平滑滚动
        scroll-behavior: smooth;
      }
    }
    .footer{
      width:100%;
      height: 0.5rem;
      background-color: white;
      border-top: 1px solid #ccc;
      display: flex;
      a{
        // 取消闪烁
      -webkit-tap-highlight-color: rgba($color: #000000, $alpha: 0);
      flex: 1;
      text-decoration: none;
      color: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      // 图标
      .iconfont{
        padding-top: 0.05rem;
        box-sizing: border-box;
      }
      //文字
      p{
        bottom: 0.05rem;
        position: relative;
      }
      }
      // 选中的二级路由
      .router-link-active{
        color: #f66;
      }
    }
  }
}

.tip{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.5);
  color: white;
  text-align: center;
  font-size: 0.3rem;
  justify-content: center;
  align-items: center;
  //默认隐藏，在横屏时显示
  display: none;
  z-index: 999999;
}

//landscape   横屏
//portrait    竖屏
@media all and (orientation: landscape){
  //当屏幕为横屏时显示
  .tip{

    display: flex;
  }
}


.fade-enter-active{
  opacity: 0;
  transition: all 1s;
}
.fade-enter-to{
  opacity: 1;
}

</style>
